<template>
  <a-dropdown position="bl" @select="handleSelect($event, nodeData)">
    <icon-more-vertical class="icon-more-vertical" />
    <template #content>
      <a-doption v-if="'parentId' in nodeData" value="add-folder">
        <template #icon>
          <icon-plus />
        </template>
        <template #default>添加子文件夹</template>
      </a-doption>
      <a-dsubmenu v-if="nodeData.children" value="order">
        <template #icon>
          <icon-nav />
        </template>
        <template #default>排列顺序</template>
        <template #content>
          <a-doption value="asc">名称（A-Z）</a-doption>
          <a-doption value="desc">名称（Z-A）</a-doption>
          <a-doption value="date">日期</a-doption>
        </template>
      </a-dsubmenu>
      <a-doption
        v-if="'parentId' in nodeData && nodeData.parentId !== '0'"
        value="rename-folder"
      >
        <template #icon>
          <icon-pen />
        </template>
        <template #default>重命名</template>
      </a-doption>
      <a-doption v-if="'parentId' in nodeData" value="upload">
        <template #icon>
          <icon-upload />
        </template>
        <template #default>上传文件</template>
      </a-doption>
      <a-doption value="download">
        <template #icon>
          <icon-download />
        </template>
        <template #default>下载源文件</template>
      </a-doption>
      <a-doption v-if="'parentId' in nodeData" value="approve">
        <template #icon>
          <icon-stamp />
        </template>
        <template #default>提交以供审阅</template>
      </a-doption>
      <a-doption v-if="'parentId' in nodeData" value="createBypass">
        <template #icon>
          <icon-email />
        </template>
        <template #default>创建附函</template>
      </a-doption>
    </template>
  </a-dropdown>
</template>

<script lang="ts" setup>
  import { PropType, getCurrentInstance, onMounted } from 'vue';
  import { FileAndFolderNodeMessage } from '@/api/tree-folder';
  import {
    addFolder,
    order,
    upload,
    downloadSource,
    approve,
    createBypass,
    renameFolder,
  } from '../hooks/dropdow-events';

  defineProps({
    nodeData: {
      type: Object as PropType<FileAndFolderNodeMessage>,
      required: true,
    },
  });

  // dropdown所在的元素
  let currentElement: Element | null = null;
  onMounted(() => {
    const instance = getCurrentInstance();
    currentElement = instance?.vnode.el?.parentElement;
  });

  // dropdown事件委托
  const handleSelect = (event: any, nodeData: FileAndFolderNodeMessage) => {
    switch (event) {
      case 'add-folder':
        addFolder(nodeData, currentElement);
        break;
      case 'asc':
      case 'desc':
      case 'date':
        order(nodeData, event);
        break;
      case 'rename-folder':
        renameFolder(nodeData);
        break;
      case 'upload':
        upload(nodeData);
        break;
      case 'download':
        downloadSource(nodeData);
        break;
      case 'approve':
        approve(nodeData);
        break;
      case 'createBypass':
        createBypass(nodeData);
        break;
      default:
    }
  };
</script>
